<template>
  <div class="home-container" :style="{ paddingBottom: `${tabbarHeight}px` }">
    <Header></Header>
    <Banner></Banner>
    <CustomTabBar ref="tabbar"></CustomTabBar>
    <List></List>
  </div>
</template>

<script setup lang="ts">
import Taro from "@tarojs/taro";
import CustomTabBar from "../../components/custom-tab-bar/customTabBar.vue";
import Banner from "./banner.vue";
import Header from "./header.vue";
import List from "./list.vue";
import { useTabbarStore, useUserStore } from "../../store";
import { storeToRefs } from "pinia";
import { onMounted } from "vue";
import { useShareAppMessage } from "@tarojs/taro";
const UserStore = useUserStore();

const tabbarStore = useTabbarStore();
const { tabbarHeight } = storeToRefs(tabbarStore);
const { Userinfo } = storeToRefs(UserStore);

useShareAppMessage(() => {
  return {
    title: "影橙电影票",
    page: `/pages/home/index?userId=${Userinfo.value.id}`,
    imageUrl: "",
  };
});
onMounted(() => {
  Taro.showShareMenu({
    withShareTicket: true,
    menus: ["share"],
  });
});
Taro.usePullDownRefresh(() => {
  setTimeout(() => {
    Taro.stopPullDownRefresh();
  }, 600);
});
</script>

<style lang="scss">
.home-container {
  display: flex;
  flex-direction: column;
}
</style>
